<template>
	<!-- 寄售详情 -->
	<view class="consign-det">
		<!-- 商品卡片 -->
		<view class="goods-cards">
			<!-- 商品卡片 -->
			<view class="card-item" v-for="(item,index) in activityBoxList" :key="index">
				<!-- 卡片左侧 -->
				<view class="card-lef">
					<image class="card-img" :src="item.image" mode="aspectFill" />
				</view>
				<!-- 卡片右侧 -->
				<view class="card-rig">
					<view class="good-name">
						{{item.boxName}}
					</view>
					<view class="good-details">
						<view class="goodstatus">
							价格：￥ <text>{{pricerange.preprice}}</text>~<text>{{pricerange.endprice}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 均价百分比 -->
		<view class="midprice">
			<view class="price-lef">
				<text class="">
					本周成交均价:￥{{pricerange.preprice}}
				</text>

				<image :src="imageUrl('uparrow.png')" mode="aspectFill" v-show="showarrow" />
				<image :src="imageUrl('downarrow.png')" mode="aspectFill" v-show="!showarrow" />
			</view>
			<view class="price-lef">
				上周成交均价:￥{{pricerange.endprice}}
			</view>
		</view>
		<!-- 折线图 -->
		<view class="linechart">
			<!-- opts:图表样式配置   chartData为：图标数据 -->
			<qiun-data-charts type="area" :opts="opts" :chartData="option" />
		</view>
		<!-- tab切换 -->
		<view class="tabs">
			<view class="changebtn">
				<view class="lef">
					<view v-for='(item,index) in tabsList' :key="index" @click="clickTabs(item,index)"
						:class="{'btn':true,'active' : tabIndex == index,'activedemo' : tabIndex == index}">
						{{item.name}}
					</view>
				</view>
				<view class="rig">
					{{goodsnum}}件在售
				</view>
			</view>
			<!-- 明细 -->
			<view class="show-data-item" v-for="(item,index) in sortedItems" :key="index">
				<view class="left">
					<view class="img">
						<image :src="item.thumb" mode="aspectFill" />
					</view>
					<view class="mid">
						<text class="mid-name">
							￥{{item.price}}
						</text>
<!-- 						<text class="mid-time">
							{{item.time}}
						</text> -->
						<view class="mid-tel">
							<image :src="item.src" mode="aspectFill" />
							<view class="">
								{{item.user}}
							</view>

						</view>
					</view>
				</view>

				<view class="right">
					<view class="buybtn">
						<view class="btn" @click="ifbuy(item.buyordown)">
							{{buyordown(item.buyordown)}}
						</view>
					</view>
				</view>
			</view>
			<view class="message">
				没有更多了
			</view>
		</view>

		<!-- 购买框 -->
		<view class="popupbuy">
			<u-popup :show="showbuy" mode="bottom" @close="closebuy" @open="open" :round="48">
				<view class="popbuy" >
					<view class="poptop">
						<view class="confirm">
							<view class="">
								确认订单
							</view>
							<uni-icons class="closeIcon" @click="closebuy" type="closeempty"></uni-icons>
						</view>
						<view class="goodcard">
							<!-- 商品卡片 -->
							<view class="card-item" v-for="(item,index) in activityBoxList" :key="index">
								<!-- 卡片左侧 -->
								<view class="card-lef">
									<image class="card-img" :src="item.image" mode=""></image>
								</view>
								<!-- 卡片右侧 -->
								<view class="card-rig">
									<view class="good-name">
										{{item.boxName}}
									</view>
									<view class="price">
										￥{{pricerange.endprice}}
									</view>
									<view class="good-details">
										<view class="goodstatus">
											购买成功后，商品将放入你的背包
										</view>
									</view>
								</view>
							</view>
						</view>
						<!-- 订单金额 -->
						<view class="orderprice">
							<view class="">
								订单金额
							</view>
							<view class="pricedemo">
								￥{{pricerange.endprice}}
							</view>
						</view>
						<view class="buyway">
							<view class="title">
								支付方式
							</view>
							<view class="way" v-for="(item,index) in orderdata" :key="index"
								@click="changeCheckedIndex(index)">
								<view class="left">
									<view class="img">
										<image :src="item.thumb" mode="aspectFill" />
									</view>
									<view class="mid">
										<view class="mid-name">
											{{item.name}}
										</view>
										<view class="mid-time">
											{{item.time}}
										</view>
									</view>
								</view>
								<view class="rig">
									<!-- 右侧单选框 -->
									<uni-icons :type="index===checkedIndex?'checkbox-filled':'circle'" size="26"
										:color="index===checkedIndex?'#FF7803':'#D0D0D0'" class="way-right"></uni-icons>
								</view>
							</view>

						</view>
					</view>
					<view class="popbottom">
						<view class="check">
							<view class="rig" @click="changeChecked">
								<uni-icons :type="readcheck?'checkbox-filled':'circle'" size="26"
									:color="readcheck?'#FF7803':'#D0D0D0'" class="way-right">
								</uni-icons>
							</view>
							<view class="word">
								我已阅读并同意<text class="rules">《用户购买协议》</text>
							</view>
						</view>
						<view class="yes btn" @click="goToPage('/pages/tabbar/market/payResult')">
							立即支付
						</view>
					</view>
				</view>
			</u-popup>

		</view>
		<!-- 下架框 -->
		<view class="Popup">
			<u-popup :show="show" mode="center" @close="close" @open="open" :round="16">
				<view class="pop">
					<view class="poptop">
						<view class="confirm">
							确认下架?
						</view>
						<view class="word">
							下架后，商品将不在寄售中心展示
						</view>
					</view>
					<view class="popbottom">
						<view class="no btn" @click="close">
							暂不下架
						</view>
						<view class="yes btn" @click="close">
							确认
						</view>
					</view>
				</view>
			</u-popup>

		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				readcheck: false,
				checkedIndex: 1,
				showbuy: false,
				show: false,
				tabIndex: 0,
				// 折线图配置到两边
				opts: {
					color: ["#FF7803"],
					// 控制坐标隐藏
					dataLabel: false,
					legend: false,
					xAxis: {
						boundaryGap: "justify",
						disabled: false,

					},
					yAxis: {
						boundaryGap: "justify",
						disabled: true,

					},
					extra: {
						area: {
							type: "straight",
							opacity: 0.8,
							addLine: true,
							width: 2,
							gradient: true,
							activeType: "hollow"
						}
					}
				},
				// 折线图数据
				option: {
						// 近七天
						categories:[1,2,3,4,5,6,7],
						series: [{
							name: '近七日交易均价',
							data: [1,2,3,4,5,6,7]
						}]
				},
				// 价格区间
				pricerange: {
					preprice: '31.36',
					endprice: '30.36'
				},

				joinnum: 3,
				activityBoxList: [{
					image: this.imagesUrl('hug.png'),
					boxName: "盲盒名称盲盒名称盲盒名称盲盒名称盲盒名称盲盒名称",
					chance: 20,
					price: 100,
					boxStatus: 1
				}],
				tabsList: [{
					name: '低价优先'
				}, {
					name: '最新发布'
				}],

				// 爆点获取数据
				showData: [{
					thumb: this.imagesUrl('tower.png'),
					price: 30.36,
					time: '12/10 11.39',
					user: '褚禹辰',
					src: this.imagesUrl('user-pic.png'),
					buyordown: true
				}, {
					thumb: this.imagesUrl('tower.png'),
					price: 34.36,
					time: '12/10 12.39',
					user: '秦益辰',
					src: this.imagesUrl('user-pic.png'),
					buyordown: true
				}, {
					thumb: this.imagesUrl('tower.png'),
					price: 24.36,
					time: '12/09 14.39',
					user: '褚禹辰',
					src: this.imagesUrl('user-pic.png'),
					buyordown: true
				}, {
					thumb: this.imagesUrl('tower.png'),
					price: 66.36,
					time: '12/29 14.39',
					user: '我',
					src: this.imagesUrl('user-pic.png'),
					buyordown: false
				}, {
					thumb: this.imagesUrl('tower.png'),
					price: 25.36,
					time: '12/23 14.39',
					user: '我',
					src: this.imagesUrl('user-pic.png'),
					buyordown: false
				}, ],

				// 订单数据
				orderdata: [{
					thumb: this.imageUrl('remain.png'),
					name: '余额支付',
					time: '余额：￥99.62',
				}, {
					thumb: this.imageUrl('wechat.png'),
					name: '微信支付',
					time: '微信支付订单',
				}],
				checkpic: {
					scr: this.imageUrl('check.png'),
				},
				showarr: true,
				// 近七天
				same_week: [],
				//当天的时间
				same_day: '',
				// 表格日期横坐标
				xdate: []
			}
		},
		created() {
			// 默认显示当天前一周的数据
			let data = [];
			for (let i = 6; i >= 0; i--) {
				data.push(this.getDay(-i)) // 前
				// data.push(this.getDay(+i)) // 后
			}
			let date = data.reverse(); //得出一周的日期进行排序
			let pkc = []; /* 用于存储展示的日期数据 */
			date.forEach((item, index) => {
				//循坏日期
				let f = new Date(item);
				let str1 = item.split('/');
				let strs = str1[1] + '/' + str1[2];
				let time = Math.round(new Date(item) / 1000); //时间戳转换
				let s = {}; //用于存储每个日期对象
				s.date = item;
				s.name = str1[2];
				s.times = time;
				pkc.push(s);
			});
			this.same_week = pkc;
			//pkc存储着今天的年月日星期几，时间戳等
			this.same_day = pkc[0].date; //今天的数据
			this.same_week.forEach(item => this.xdate.push(item.name));
			this.xdate=this.xdate.reverse()
			// console.log('this.same_week', this.same_week);
			// console.log('this.xdate', this.xdate);
		},
		methods: {
			getDay(day) {
				let today = new Date();
				let targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day;
				today.setTime(targetday_milliseconds); //注意，这行是关键代码
				let tYear = today.getFullYear();
				let tMonth = today.getMonth();
				let tDate = today.getDate();
				tMonth = this.doHandleMonth(tMonth + 1);
				tDate = this.doHandleMonth(tDate);
				return tYear + '/' + tMonth + '/' + tDate;
			},
			doHandleMonth(month) {
				let m = month;
				if (month.toString().length == 1) {
					m = month;
				}
				return m;
			},
			// 跳转路由
			goToPage(url) {
				if (this.readcheck) {
					this.show = false
					uni.navigateTo({
						url
					})
				} else {
					uni.showToast({
						title: '请先勾选协议', //显示的文字
						duration: 2000, //显示多少毫秒，默认1500毫秒，时间到自动隐藏
						icon: "error" //自定义显示的图标，默认成功success，错误error,加载loading，不显示图标是none
					})
				}
			},
			sortKey(array, key) {
				return array.sort(function(a, b) {
					var x = a[key];
					var y = b[key];
					return x > y ? -1 : x < y ? 1 : 0;
				});
			},

			// 弹出层
			open() {
				// console.log('open');
			},
			close() {
				this.show = false
				// console.log('close');
			},
			closebuy() {
				this.showbuy = false
				// console.log('close');
			},
			clickTabs(item, index) {
				this.tabIndex = index
				// if (item.name === '低价优先') {
				// 	this.showData = this.dataAdd
				// } else {
				// 	this.showData = this.dataCut
				// }
			},
			// 判断是购买还是下架
			ifbuy(item) {
				console.log(item)
				if (item == true) {
					this.showbuy = true
				} else {
					this.show = true
				}
			},
			// 改变选中的支付方式
			changeCheckedIndex(v) {
				// 需要判断余额是否足够支付
				this.checkedIndex = v

			},
			// 改变阅读状态
			changeChecked(e) {
				this.readcheck = !this.readcheck
			}

		},
		computed: {
			showarrow() {
				if (this.pricerange.preprice > this.pricerange.endprice) {
					return true

				} else {
					return false
				}
			},
			buyordown() {
				return function(item) {
					if (item) {
						return '购买'

					} else {
						return '下架'
					}
				}
			},
			goodsnum() {
				return this.showData.length
			},
			// 排序
			sortedItems() {
				if (this.tabIndex == 0) {
					return this.showData.sort((a, b) => a.price - b.price);
				} else {
					// return this.showData.sort((a, b) => a.price - b.price);

					return this.sortKey(this.showData, "time");
				}

			},
		}

	}
</script>
<style>
	page {
		background-color: #f8f8f8;
	}
</style>
<style lang="scss" scoped>

	.consign-det {
		.goods-cards {
			.card-item {
				margin: 0rpx auto 0rpx;
				color: #333333;
				padding: 0 30rpx;
				height: 258rpx;
				background-color: #ffffff;
				display: flex;
				justify-content: space-between;
				align-items: center;
				position: relative;

				.card-lef {
					width: 198rpx;
					height: 198rpx;
					overflow: hidden;

					.card-img {
						width: 100%;
						height: 100%;
					}
				}

				.card-rig {
					width: 472rpx;
					height: 198rpx;
					display: flex;
					flex-direction: column;
					position: relative;

					.good-name {
						height: 88rpx;
						width: 472rpx;
						font-size: 26rpx;
						line-height: 44rpx;
						letter-spacing: 0.64px;

					}

					.good-details {
						margin-top: 16rpx;
						display: flex;
						justify-content: space-between;
						align-item: center;
						text-align: right;
						line-height: 20rpx;

						.goodstatus {
							text-align: center;

							line-height: 34rpx;
							font-size: 24rpx;
							color: #ff7803;
							position: absolute;
							bottom: 0;
						}

					}
				}
			}
		}

		.midprice {
			line-height: 64rpx;
			font-size: 24rpx;
			margin: 0 auto;
			padding: 0 30rpx;
			background-color: #fff;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.price-lef {
				display: flex;
				align-items: center;

				image {
					width: 24rpx;
					height: 24rpx;
				}
			}
		}

		.linechart {
			border-radius: 12rpx;
			background-color: #fff;
			margin: 0 auto;
			height: 332rpx;
		}

		.tabs {
			background-color: #fff;
			margin-top: 24rpx;
			padding-top: 32rpx;
			border-radius: 20rpx;
			.changebtn {
				padding-bottom: 32rpx;
				display: flex;
				justify-content: space-between;
				

				.lef {
					// width: 320rpx;
					display: flex;
					justify-content: left;

					.btn {
						text-align: center;
						font-size: 24rpx;
						border-radius: 32rpx;
						line-height: 56rpx;
						width: 160rpx;
						height: 56rpx;
						color: #333333;
						background: #F5F5F5;
					}

					.btn:first-child {
						margin-right: 30rpx;
						margin-left: 30rpx;
					}

					.active {
						background: #FF7803;
						color: #FFFFFF;
					}
				}

				.rig {
					color: #FF7803;
					font-size: 24rpx;
					line-height: 56rpx;
					margin-right: 30rpx;
				}
			}

			.show-data-item {
				border-radius: 16rpx;
				width: 690rpx;
				margin: 0 auto;
				display: flex;
				justify-content: space-between;
				padding: 20rpx 0;
				font-size: 26rpx;
				line-height: 26rpx;
				color: #333;
				
				margin-bottom: 18rpx;

				.left {
					display: flex;
					margin-left: 20rpx;

					.img {
						width: 84rpx;
						height: 84rpx;

						image {
							width: 84rpx;
							height: 84rpx;
						}
					}

					.mid {
						margin-left: 20rpx;
						position: relative;

						.mid-name {
							font-size: 32rpx;
							font-weight: 500;
							color: #333333;
							vertical-align: middle;
						}

						.mid-time {
							margin-left: 4rpx;
							font-size: 22rpx;
							letter-spacing: 0.0032em;
							color: #999999;
							vertical-align: middle;
						}

						.mid-tel {
							display: flex;
							align-items: center;
							font-size: 24rpx;
							position: absolute;
							bottom: 0;
							width: 192rpx;
							height: 32rpx;
							line-height: 30rpx;

							image {
								display: inline-block;

								width: 40rpx;
								height: 40rpx;
								margin-right: 16rpx;
							}
						}
					}

				}



				.right {
					margin-right: 30rpx;
					font-size: 24rpx;
					text-align: right;

					.buybtn {

						.btn {
							// position: absolute;
							// bottom: 20rpx;
							margin-top: 26rpx;
							text-align: center;
							font-size: 24rpx;
							border-radius: 32rpx;
							line-height: 56rpx;
							width: 112rpx;
							height: 56rpx;
							background: #FF7803;
							color: #FFFFFF;
						}
					}
				}
			}
			.message{
				height: 108rpx;
				text-align: center;
				font-family: PingFang SC;
				font-size: 24rpx;
				font-weight: normal;
				line-height: 108rpx;
				letter-spacing: 0.64rpx;
				/* 次要内容-999 */
				color: #999999;
			}
		}

		.Popup {

			.pop {
				width: 568rpx;
				height: 298rpx;

				.poptop {
					margin-top: 48rpx;
					text-align: center;
					display: flex;
					flex-direction: column;

					.confirm {
						height: 44rpx;
						font-size: 32rpx;
						font-weight: 550;
						letter-spacing: 0.0032em;
						color: #333333;

					}

					.word {
						margin-top: 16rpx;
						font-size: 24rpx;
					}
				}

				.popbottom {
					display: flex;
					justify-content: space-between;
					width: 100%;
					box-sizing: border-box;
					padding: 0 30rpx;

					.btn {
						margin-top: 40rpx;
						text-align: center;
						font-size: 24rpx;
						border-radius: 38rpx;
						line-height: 76rpx;
						width: 230rpx;
						height: 76rpx;
						background: #FF7803;
						color: #FFFFFF;
					}

					.no {
						background: #F8F8F8;
						color: #999999;
					}

					.yes {}
				}
			}
		}

		.popupbuy {
			.popbuy {
				height: 1044rpx;

				.poptop {
					margin-top: 28rpx;
					text-align: center;
					display: flex;
					flex-direction: column;

					.confirm {
						position: relative;
						text-align: center;
						height: 44rpx;
						font-size: 32rpx;
						font-weight: 550;
						letter-spacing: 0.0032em;
						color: #333333;
						.closeIcon{
							position: absolute;
							top: 7rpx;
							right: 30rpx;
						}
					}

					.word {
						margin-top: 16rpx;
						font-size: 24rpx;
					}

					.goodcard {
						.card-item {
							margin: 60rpx auto 48rpx;
							color: #333333;
							width: 690rpx;
							
							background-color: #ffffff;
							display: flex;
							justify-content: space-between;
							align-items: center;
							position: relative;

							.card-lef {
								width: 198rpx;
								height: 198rpx;
								overflow: hidden;

								.card-img {
									width: 100%;
									height: 100%;
								}
							}

							.card-rig {
								width: 472rpx;
								height: 198rpx;
								display: flex;
								flex-direction: column;
								position: relative;

								.price {
									margin-top: 20rpx;
									width: 108rpx;
									height: 32rpx;
									text-align: left;
									color: #F51F43;
									line-height: 32rpx;
									font-weight: 550;
									font-size: 32rpx;
								}

								.good-name {
									text-align: left;
									height: 88rpx;
									width: 472rpx;
									font-size: 26rpx;
									line-height: 44rpx;
									letter-spacing: 0.64px;
								}

								.good-details {
									margin-top: 16rpx;
									display: flex;
									justify-content: space-between;
									align-item: center;
									text-align: right;
									line-height: 20rpx;

									.goodstatus {
										text-align: center;

										line-height: 34rpx;
										font-size: 24rpx;
										color: #ff7803;
										position: absolute;
										bottom: 0;
									}

								}
							}
						}
					}

					.orderprice {
						padding: 0 30rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;
						font-size: 28rpx;

						.pricedemo {
							line-height: 32rpx;
							font-weight: 550;
							font-size: 32rpx;
						}
					}



					.buyway {
						height: 354rpx;
						width: 750rpx;


						.title {
							margin-top: 48rpx;
							margin-left: 30rpx;
							margin-bottom: 20rpx;
							text-align: left;
							font-size: 28rpx;
							font-weight: 550;
							line-height: 44rpx;
							letter-spacing: 0.64rpx;
						}

						.way {
							padding: 0 30rpx;
							display: flex;
							justify-content: space-between;
							align-items: center;
							height: 132rpx;

							.left {
								height: 132rpx;
								display: flex;
								align-items: center;

								.img {
									width: 48rpx;
									height: 48rpx;

									image {
										width: 48rpx;
										height: 48rpx;
									}
								}

								.mid {
									width: 260rpx;
									margin-left: 36rpx;
									text-align: left;
									align-items: center;

									.mid-name {
										font-size: 28rpx;
										font-weight: 550;
										margin-bottom: 16rpx;
									}

									.mid-time {
										font-size: 24rpx;
										color: #999999;
									}
								}
							}

							.rig {
								height: 48rpx;
								width: 48rpx;
								display: flex;
								align-items: center;
								border: 1px sold black;

								image {
									height: 48rpx;
									width: 48rpx;
								}
							}
						}

					}

				}

				.popbottom {
					display: flex;
					flex-direction: column;
					text-align: center;
					justify-content: space-between;
					width: 100%;
					box-sizing: border-box;
					padding: 0 30rpx;

					.check {
						margin: 0 auto;
						display: flex;
						color: #999;
						margin-top: 80rpx;

						.rig {
							display: flex;
							align-items: center;
							vertical-align: middle;

							image {
								height: 48rpx;
								width: 48rpx;
								line-height: 48rpx;
							}
						}

						.word {
							vertical-align: middle;
							line-height: 52rpx;
						}

						.rules {
							color: #ff7803;
						}
					}

					.btn {
						margin: 0 auto;
						margin-top: 48rpx;
						text-align: center;
						font-size: 24rpx;
						border-radius: 44rpx;
						line-height: 88rpx;
						width: 690rpx;
						height: 88rpx;
						background: #FF7803;
						color: #FFFFFF;
					}


				}
			}
		}
	}
</style>